<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../plugins/element-ui/index.js"></script>
    <link rel="stylesheet" href="../plugins/element-ui/index.css">
    <link rel="stylesheet" href="../css/public.css">
    <title>登录</title>
</head>

<body>

<div id="app" class="login-app">
    <!-- 登录注册盒子 -->
    <el-card class="login-box">
        <el-tabs v-model="activeTab" @tab-click="handleChangeTab" a>
            <!--登录选项卡-->
            <el-tab-pane label="登录" name="login">
                <h3>登录</h3>
                <el-form ref="form" label-width="80px" :model="formData" action="http://localhost:8080"
                         method="post">
                    <el-form-item label="ID:" size="medium">
                        <el-input placeholder="请输入学号/教工号" v-model="formData.id" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="密码:" size="medium">
                        <el-input placeholder="请输入密码" v-model="formData.pwd" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="身份:">
                        <el-select v-model="formData.role" placeholder="请选择" size="mini" style="width: 100px;">
                            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleLogin">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <!--注册选项卡-->
            <el-tab-pane label="注册" name="register">
                <h3>注册</h3>
                <el-form ref="form" label-width="80px" :model="formData" action="http://localhost:8080"
                         method="post">
                    <el-form-item label="ID:" size="medium">
                        <el-input placeholder="请输入学号/教工号" v-model="formData.id" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:" size="medium">
                        <el-input placeholder="请输入姓名" v-model="formData.name" maxlength="10" show-word-limit
                                  clearable>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="密码:" size="medium">
                        <el-input placeholder="请输入密码" v-model="formData.pwd" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码:" size="medium">
                        <el-input placeholder="请输入密码" v-model="repwd" show-password></el-input>
                    </el-form-item>
                    <el-form-item label="班级:" size="medium">
                        <el-select v-model="formData.academy" placeholder="院系" @change="academyChange($event)"
                                   size="mini" style="width: 80px;">
                            <el-option v-for="academy in sOptions.academy" :key="academy" :label="academy"
                                       :value="academy">
                            </el-option>
                        </el-select>
                        <el-select v-model="formData.major" placeholder="专业" @change="majorChange" size="mini"
                                   style="width: 80px;">
                            <el-option v-for="majorItem in majors" :key="majorItem.major" :label="majorItem.major"
                                       :value="majorItem.major">
                            </el-option>
                        </el-select>
                        <el-select v-model="formData.className" placeholder="班级" @change="" size="mini"
                                   style="width: 90px;">
                            <el-option v-for="classItem in classes" :key="classItem.class" :label="classItem.class"
                                       :value="classItem.class">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="电话:" size="medium">
                        <el-input placeholder="请输入电话号码" v-model="formData.tel" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱:" size="medium">
                        <el-input placeholder="请输入邮箱" v-model="formData.email" clearable></el-input>
                    </el-form-item>

                    <el-form-item label="身份:">
                        <el-select v-model="formData.role" placeholder="请选择" size="mini" style="width: 100px;">
                            <el-option v-for="item in roleOptions" :key="item.value" :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleRegister">注册</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </el-card>

</div>

<script>
    Vue.config.productionTip = false
    new Vue({
        el: "#app",
        data() {
            return {
                activeTab: 'register',
                roleOptions: [{value: 'student', label: '学生'}, {value: 'teacher', label: '教师'}, {
                    value: 'admin',
                    label: '管理员'
                }],
                repwd: '',
                formData: {
                    id: '',
                    name: '',
                    pwd: '',
                    className: '',
                    academy: '',
                    major: '',
                    tel: '',
                    email: '',
                    role: 'student'
                },
                sOptions: {
                    academy: ['计算机学院', '艺术学院', '医学院', '理学院'],
                    majors: [
                        {academy: '计算机学院', major: '软件工程'},
                        {academy: '计算机学院', major: '计算机科学与技术'},
                        {academy: '计算机学院', major: '人工智能'},
                        {academy: '理学院', major: '数学与应用数学'},
                        {academy: '理学院', major: '信息与计算科学'},
                        {academy: '医学院', major: '临床医学'},
                        {academy: '医学院', major: '药学'},
                        {academy: '医学院', major: '口腔医学'},
                        {academy: '艺术学院', major: '美术学'},
                        {academy: '艺术学院', major: '视觉传达设计'},
                    ],
                    classes: [
                        {major: '软件工程', class: '2022级软件工程1班'},
                        {major: '软件工程', class: '2022级软件工程2班'},
                        {major: '软件工程', class: '2022级软件工程3班'},
                        {major: '计算机科学与技术', class: '2022级计算机科学与技术1班'},
                        {major: '计算机科学与技术', class: '2022级计算机科学与技术2班'},
                        {major: '人工智能', class: '2022级人工智能1班'},
                        {major: '数学与应用数学', class: '数学与应用数学1班'},
                        {major: '信息与计算科学', class: '信息与计算科学1班'},
                        {major: '视觉传达设计', class: '2022级视觉传达设计1班'},
                        {major: '美术学', class: '2022级美术学1班'},
                        {major: '临床医学', class: '2022级临床医学1班'},
                        {major: '药学', class: '2022级药学1班'},
                        {major: '口腔医学', class: '2022级口腔医学1班'},
                    ]
                },
                academy: '',
                majors: [],
                classes: [],
            }
        },
        methods: {
            handleLogin() {
                console.log(this.formData);
                axios({
                    method: 'POST',
                    url: '/login/',
                    data: {
                        id: this.formData.id,
                        pwd: this.formData.pwd,
                        role: this.formData.role
                    }
                }).then(rsp => {
                    if (rsp.data.success) {
                        this.$message({message: '登录成功！', type: 'success'})
                        //保存localStorge
                        //跳转页面
                        this.redirectURL('/index')
                    } else {
                        this.$message("登录失败，请检查用户名和密码是否正确")
                    }
                }, err => {
                    this.$message.error(err.message)
                })
            },
            handleRegister() {
                if (this.formData.id == '') {
                    this.$message("学号/教工号不能为空")
                    return
                }
                if (this.repwd != this.formData.pwd) {
                    this.$message("两次密码不一致")
                    return
                }
                console.log(this.formData);
//发送请求
                axios({
                    method: 'post',
                    // baseURL: 'http://localhost:8080/',
                    url: '/login/reg',
                    //提交数据格式为：{user={id='xx',pwd='xx'}}
                    data: {
                        user: this.formData
                    }
                }).then(rsp => {
                    console.log('rsp:', rsp.data)
                    if (rsp.data.success) {
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });
                        this.activeTab = 'login'
                    } else {
                        this.$message("添加失败")
                    }
                }, err => {
                    this.$message.error(err.message)
                }).finally(() => {
                })

                //提交数据格式为：{id='xx',pwd='xx'}
                // axios.post('http://localhost:8080/login/reg2',this.formData).then(
                //     rsp=>{console.log('rsp:',rsp.data)},
                //     err=>{this.$message(e.message)}
                // )
            },
            handleChangeTab(tab, event) {
                // console.log(tab, event);
            },
            academyChange(e) {
                this.formData.major = '' //选择一级下拉菜单后先清空二级下拉菜单之前的内容
                this.formData.className = ''
                this.majors = this.sOptions.majors.filter(major => {
                    return major.academy == this.formData.academy
                })
            },
            majorChange() {
                this.formData.className = ''
                this.classes = this.sOptions.classes.filter(classItem => {
                    return classItem.major == this.formData.major
                })
            },
            redirectURL(url) {
                console.log(url)
                window.location.href = window.location.origin + url;
            }
        },
        created() {
            console.log(this)
            axios.baseURL = 'http://localhost:8080/'

        },
    })
</script>

</body>
</html>